<template>
  <view class="resetPassword">
    <slot name="header">
      <h2>重置密码</h2>
    </slot>
    <view class="input_wrapper">
      <view class="inputItem" :class="{ focus: isFocus.password1, password_error: errorFlag.password1 }">
        <view class="inputContent">
          <img :src="icons.password_icon1" alt="" class="icon">
          <input ref="password1" type="password" placeholder="请输入密码" @focus="focus('password1')" @blur="blur('password1')" @input="inputPwd">
        </view>
      </view>
      <view class="inputItem" :class="{ focus: isFocus.password2, password_error: errorFlag.password2, password_dif: diffPassword }">
        <view class="inputContent">
          <img :src="icons.password_icon2" alt="" class="icon">
          <input
            ref="password2"
            type="password"
            placeholder="再次输入密码"
            @focus="focus('password2')"
            @blur="blur('password2')"
            @input="validatePassword"
          >
        </view>
      </view>
    </view>
    <view>
      <button :class="{ opt_button: !isLoginForbidden, forbidden: isLoginForbidden }" @tap="submit">
        完成
      </button>
    </view>
  </view>
</template>

<script>
import icons from './components/icons'
import user from '@/api/user'

export default {
  name: 'ResetPassword',
  data() {
    return {
      icons: {
        password_icon1: icons.password_icon,
        password_icon2: icons.password_icon
      },
      form: {
        password1: '',
        password2: ''
      },
      isFocus: {
        password1: false,
        password2: false
      },
      errorFlag: {
        password1: false,
        password2: false
      },
      timer: false,
      hideFooter: true
    }
  },
  onShow() {
    if (!uni.getStorageSync('access_token')) {
      uni.showModal({
        title: '请先登录',
        content: '登录后才能重置密码',
        success: function(res) {
          uni.navigateBack({ delta: 0 })
        }
      })
    }
  },
  computed: {
    diffPassword() {
      return this.form.password1 !== this.form.password2 && !this.isFocus.password1
    },
    // 决定按钮的禁用状态
    isLoginForbidden() {
      return !this.form.password1 || !this.form.password2 || this.errorFlag.password1 || this.errorFlag.password2 || this.diffPassword
    }
  },

  mounted() {
    // #ifdef H5
    // 监听事件
    window.onresize = () => {
      return (() => {
        const docmHeight = document.documentElement.clientHeight || document.body.clientHeight
        const showHeight = document.documentElement.clientHeight || document.body.clientHeight
        this.hideFooter = docmHeight <= showHeight
      })()
    }
    // #endif
  },
  methods: {
    inputPwd: function(e) {
      const password1 = e.detail.value
      this.form.password1 = password1
      this.errorFlag.password1 = !password1
    },
    // 验证两次输入密码是否一致
    validatePassword: function(e) {
      const password2 = e.detail.value
      this.form.password2 = password2
      this.errorFlag.password2 = !password2
    },
    submit() {
      if (!this.isLoginForbidden) {
        // 发送请求
        if (!this.errorFlag.password1 && !this.errorFlag.password2 && !this.diffPassword) {
          user.changePassword({ password: this.form.password1 })
            .then(res => {
              uni.showToast({
                title: '密码修改成功',
                duration: 2000
              })
            }).catch(err => {
              console.log(err)
              uni.showModal({
                title: '提示',
                content: '密码修改出错，请重新尝试',
                showCancel: false
              })
            })
        }
      }
    },
    focus(type) {
      if (type === 'password1') {
        this.isFocus.password1 = true
        this.icons.password_icon1 = icons.password_active
        this.errorFlag.password1 = false
      }
      if (type === 'password2') {
        this.isFocus.password2 = true
        this.icons.password_icon2 = icons.password_active
        this.errorFlag.password2 = false
      }
    },
    blur(type) {
      if (type === 'password1') {
        this.isFocus.password1 = false
        this.icons.password_icon1 = icons.password_icon
      }
      if (type === 'password2') {
        this.isFocus.password2 = false
        this.icons.password_icon2 = icons.password_icon
      }
    }
  }
}
</script>

<style lang="less" scoped>
@mainColor: #007cdc;
.gradient {
  background-image: linear-gradient(to right, @mainColor, lighten(@mainColor, 18%));
}
.error {
  background: red;
  transform: scaleY(1);
  font-size: 0.72rem;
  color: red;
  text-align: right;
  line-height: 1.6rem;
}
.resetPassword {
  width: 80%;
  margin: 0 auto;
  padding-top: 33%;
  text-align: center;
  h2 {
    color: #666666;
    font-size: 1.6rem;
  }
  //用户名、密码输入框
  .input_wrapper {
    .phone_number {
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      font-weight: bold;
    }
    .inputItem {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      position: relative;
      margin-top: 2rem;
      &::after {
        content: '';
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        transform: scaleY(0.5);
        background: #bfbfbf;
      }

      .inputContent {
        padding: 0.4rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        .icon {
          width: 1.32rem;
          height: 1.32rem;
          margin-right: 1.2rem;
        }
        input {
          font-size: 1rem;
          border: none;
          outline: none;
          width: 90%;
          letter-spacing: 0.1rem;
          &::placeholder {
            color: #aaaaaa;
          }
        }
      }
    }
    .focus::after {
      background: @mainColor;
    }
    .password_error::after {
      content: '密码不能为空';
      .error();
    }
    .password_dif::after {
      content: '两次密码输入不一致';
      .error();
    }
  }
  //完成按钮
  button {
    .gradient;
    border: none;
    outline: none;
    width: 100%;
    position: relative;
    color: white;
    border-radius: 1.2rem;
    font-size: 1rem;
    margin-top: 2.4rem;
    overflow: hidden;
    letter-spacing: 0.6rem;
    text-indent: 0.6rem;
    text-align: center;
    outline: 0;
  }
  .opt_button {
    cursor: pointer;
    &::after {
      content: '';
      background: #fff;
      display: block;
      position: absolute;
      width: 200%;
      height: 200%;
      top: -5%;
      border-radius: 50px;
      margin-left: -80%;
      opacity: 0;
      transition: all 0.75s ease-in-out;
    }
    &:active::after {
      width: 0;
      opacity: 0.6;
      transition: 0s;
    }
  }
  .forbidden {
    background: tint(@mainColor, 70%);
    color: fade(white, 80%);
  }
}
</style>
